Skip to content

Fix clickable links in canvas previews - #136

Open
Luna Qiu (lunaqiu) wants to merge 1 commit into
microsoft:mainfrom
lunaqiu:fix/clickable-note-links
Open

Fix clickable links in canvas previews#136
Luna Qiu (lunaqiu) wants to merge 1 commit into
microsoft:mainfrom
lunaqiu:fix/clickable-note-links

Conversation

@lunaqiu

Copy link
Copy Markdown
Collaborator

Summary

  • allow plain primary-click activation for links in read-only and drag-only Milkdown previews
  • keep Ctrl/Cmd + click for editable surfaces while preserving unsafe URL validation
  • restore pointer events for links inside non-interactive Note bodies

Fixes #135

Testing

  • pnpm typecheck
  • pnpm format
  • pnpm lint:fix (0 errors)
  • pnpm --filter @huabu/web test -- src/components/Milkdown/__tests__/previewAccessibility.test.tsx src/components/Milkdown/__tests__/blockCommands.test.ts (67 passed)

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Links in drag-only previews can still initiate node dragging and cannot be activated with Enter.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Updates Milkdown previews so links open normally in read-only canvas surfaces while retaining modifier-click behavior in editable editors.

Changes:

  • Enables plain-click link activation in read-only and drag-only previews.
  • Restores pointer events for links inside note previews.
  • Adds regression tests and updates architecture documentation.
File summaries
File Description
docs/architecture/note-node.md Documents link behavior by surface mode.
MilkdownPreview.tsx Restores link pointer interaction.
createMilkdown.ts Selects plain- or modifier-click behavior.
previewAccessibility.test.tsx Tests link hit-testing classes.
blockCommands.test.ts Tests link activation modes.
Review details

Suppressed comments (1)

apps/web/src/components/Milkdown/MilkdownPreview.tsx:269

  • In enableBlockDrag previews these links remain mouse-only: onKeyDownCapture treats Enter as an editing key and calls preventDefault, so a focused anchor cannot perform its native keyboard activation. Exempt Enter when the event target is an a[href] (while continuing to swallow Enter elsewhere) and cover the drag-only component path with a keyboard test.
      className={clsx('[&_a]:pointer-events-auto', className)}
  • Files reviewed: 5/5 changed files
  • Comments generated: 1
  • Review effort level: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

<div
ref={containerRef}
className={className}
className={clsx('[&_a]:pointer-events-auto', className)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Canvas Note links are not clickable

2 participants